import { EllipsisOutlined, PlusOutlined } from "@ant-design/icons";
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable, TableDropdown } from "@ant-design/pro-components";
import { Button, Dropdown, Space, Tag } from "antd";
import { useRef } from "react";
export const waitTimePromise = async (time: number = 100) => {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve(true);
		}, time);
	});
};

export const waitTime = async (time: number = 100) => {
	await waitTimePromise(time);
};

type GithubIssueItem = {
	url: string;
	id: number;
	number: number;
	title: string;
	labels: {
		name: string;
		color: string;
	}[];
	state: string;
	comments: number;
	created_at: string;
	updated_at: string;
	closed_at?: string;
};

const columns: ProColumns<GithubIssueItem>[] = [
	{
		dataIndex: "index",
		valueType: "indexBorder",
		width: 48
	},
	{
		title: "手机号",
		dataIndex: "title"
	},
	{
		title: "姓名",
		dataIndex: "title"
	},
	{
		title: "角色",
		dataIndex: "title"
	},
	{
		disable: true,
		title: "状态",
		dataIndex: "state",
		filters: true,
		onFilter: true,
		ellipsis: true,
		valueType: "select",
		valueEnum: {
			all: { text: "超长".repeat(50) },
			open: {
				text: "未解决",
				status: "Error"
			},
			closed: {
				text: "已解决",
				status: "Success",
				disabled: true
			},
			processing: {
				text: "解决中",
				status: "Processing"
			}
		}
	},
	{
		disable: true,
		title: "部门",
		dataIndex: "labels",
		search: false,
		renderFormItem: (_, { defaultRender }) => {
			return defaultRender(_);
		},
		render: (_, record) => (
			<Space>
				{record.labels.map(({ name, color }) => (
					<Tag color={color} key={name}>
						{name}
					</Tag>
				))}
			</Space>
		)
	},
	{
		title: "操作",
		valueType: "option",
		key: "option",
		render: (text, record, _, action) => [
			<a
				key="editable"
				onClick={() => {
					action?.startEditable?.(record.id);
				}}
			>
				编辑
			</a>,
			<a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
				查看
			</a>,
			<TableDropdown
				key="actionGroup"
				onSelect={() => action?.reload()}
				menus={[
					{ key: "copy", name: "复制" },
					{ key: "delete", name: "删除" }
				]}
			/>
		]
	}
];

// eslint-disable-next-line react/display-name
export default () => {
	const actionRef = useRef<ActionType>();
	return (
		<ProTable<GithubIssueItem>
			columns={columns}
			actionRef={actionRef}
			cardBordered
			editable={{
				type: "multiple"
			}}
			columnsState={{
				persistenceKey: "pro-table-singe-demos",
				persistenceType: "localStorage",
				defaultValue: {
					option: { fixed: "right", disable: true }
				},
				onChange(value) {
					console.log("value: ", value);
				}
			}}
			rowKey="id"
			search={{
				labelWidth: "auto"
			}}
			options={{
				setting: {
					listsHeight: 400
				}
			}}
			form={{
				// 由于配置了 transform，提交的参数与定义的不同这里需要转化一下
				syncToUrl: (values, type) => {
					if (type === "get") {
						return {
							...values,
							created_at: [values.startTime, values.endTime]
						};
					}
					return values;
				}
			}}
			pagination={{
				pageSize: 5,
				onChange: page => console.log(page)
			}}
			dateFormatter="string"
			toolBarRender={() => [
				<Button
					key="button"
					icon={<PlusOutlined />}
					onClick={() => {
						actionRef.current?.reload();
					}}
					type="primary"
				>
					停用
				</Button>,
				<Button
					key="button"
					icon={<PlusOutlined />}
					onClick={() => {
						actionRef.current?.reload();
					}}
					type="primary"
				>
					批量改角色
				</Button>,
				<Button
					key="button"
					icon={<PlusOutlined />}
					onClick={() => {
						actionRef.current?.reload();
					}}
					type="primary"
				>
					批量改权限
				</Button>,
				<Dropdown
					key="menu"
					menu={{
						items: [
							{
								label: "1st item",
								key: "1"
							},
							{
								label: "2nd item",
								key: "2"
							},
							{
								label: "3rd item",
								key: "3"
							}
						]
					}}
				>
					<Button>
						<EllipsisOutlined />
					</Button>
				</Dropdown>
			]}
		/>
	);
};
